<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>权限管理</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/css/oksub.css}">
    <link rel="stylesheet" th:href="@{/layui_ext/dtree/dtree.css}">
    <link rel="stylesheet" th:href="@{/layui_ext/dtree/font/dtreefont.css}">
    <script type="text/javascript" th:src="@{/lib/loading/okLoading.js}"></script>
</head>
<body>
<div class="ok-body">
    <blockquote class="layui-elem-quote quoteBox">
        <form class="layui-form" lay-filter="searchForm">
            <div class="layui-inline">
                <a class="layui-btn layui-bg-cyan disRole">权限分配</a>
                <a class="layui-btn layui-bg-cyan addRole">新增角色</a>
            </div>
        </form>
    </blockquote>
    <!--数据表格-->
    <table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
</div>
<!--js逻辑-->
<script th:src="@{/lib/layui/layui.js}"></script>
<script th:inline="none">
    layui.extend({
        dtree: '/layui_ext/dtree/dtree'
    }).use(["element", "jquery", "table", "form", "laydate", "okLayer", "layer",
        "okUtils", "okMock", "dtree"], function () {
        table = layui.table;
        form = layui.form;
        layer = layui.layer;
        laydate = layui.laydate;
        okLayer = layui.okLayer;
        okUtils = layui.okUtils;
        okMock = layui.okMock;
        $ = layui.jquery;
        dtree = layui.dtree;

        laydate.render({
            elem: "#startTime",
            type: "datetime"
        });
        laydate.render({
            elem: "#endTime",
            type: "datetime"
        });
        okLoading.close($);
        var userTable = table.render({
            elem: '#tableId',
            url: "/api/system/powerManage",
            limit: 20,
            page: true,
            id: "roleManage",
            toolbar: true,
            toolbar: "#toolbarTpl",
            size: "sm",
            cols: [[{
                type: "checkbox",
                fixed: "left"
            }, {
                field: "id",
                title: "角色编号",
                width: 250,
                sort: true
            }, {
                field: "roleName",
                title: "角色名称",
                width: 250
            }, {
                field: "code",
                title: "编码",
                width: 250
            }, {
                title: "操作",
                align: "center",
                fixed: "right",
                templet: "#operationTpl"
            }
            ]],
            done: function (res, curr, count) {
                console.info(res, curr, count);
            }
        });

        table.on("tool(tableFilter)", function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case "edit":
                    edit(data);
                    break;
                case "del":
                    del(data.id);
                    break;
            }
        });

        //角色分配
        $(".disRole").click(function () {
            var checkData = table.checkStatus('roleManage').data;
            if (checkData == null || checkData.length == 0) {
                layer.msg("请先选中需要分配员工", {
                    "icon": 2
                });
                return;
            } else if (checkData.length > 1) {
                layer.msg("只能选中一名员工", {
                    "icon": 2
                });
                return;
            }


            class_layer = layer.open({
                type: 1,  //type:0 也行
                title: "选择角色",
                area: ["400px", "80%"],
                content: '<ul id="roleTree" class="dtree" data-id="0"></ul>',
                btn: ['确认选择'],
                success: function (layero, index) {

                    var DTree = dtree.render({
                        obj: $("#roleTree"),
                        url: "/api/system/powerList",
                        dataStyle: "layuiStyle",  //使用layui风格的数据格式
                        dataFormat: "list", //配置data的风格为list
                        checkbar: true,
                        checkbarType: "all" // 默认就是all，其他的值为： no-all  p-casc   self  only
                        //checkbarType: "self"
                    });

                },
                yes: function (index, layero) {
                    var checkbarNodes = dtree.getCheckbarNodesParam("roleTree");
                    // console.log("-----------------------")
                    // console.log(JSON.stringify(checkData[0].id))
                    // console.log("-----------------------")
                    // console.log(JSON.stringify(checkbarNodes))
                    var powerIds = new Array();

                    for (var i = 0; i < checkbarNodes.length; i++) {
                        powerIds.push(checkbarNodes[i].nodeId);
                    }
                    console.log(powerIds)

                    $.get("/api/system/disRole", {
                        powerId: powerIds.join(","),
                        roleId: checkData[0].id
                    }, function (data) {
                        if (data.code == 200) {
                            layer.msg("设置成功", {"icon": 1});
                            userTable.reload(); //刷新表格数据（也即让table重新加载url）
                            layer.close(index);//关闭弹出框
                        } else {
                            layer.close(index);//关闭弹出框
                            layer.msg(data.msg, {
                                icon: 2
                            });
                        }
                    })
                }
            });

        })


        $(".addRole").click(function () {
            var index = layui.layer.open({
                title: "新增角色信息",
                type: 2,
                content: "/page/system/roleAdd",
                success: function (layero, index) {
                    setTimeout(function () {
                        layui.layer.tips('点击此处返回角色列表',
                            '.layui-layer-setwin .layui-layer-close', {
                                tips: 3
                            });
                    }, 500)
                }
            })
            layui.layer.full(index);
            //改变窗口大小时，重置弹窗的宽高，防止超出可视区域（如F12调出debug的操作）
            $(window).on("resize", function () {
                layui.layer.full(index);
            })
        })

        function edit(data) {
            var index = layui.layer.open({
                title: "编辑角色信息",
                type: 2,
                content: "/page/system/roleEdit",
                success: function (layero, index) {
                    var body = layui.layer.getChildFrame('body', index);
                    //如果是编辑赋初始值
                    //body.find("#roleId").attr("hidden", hidden);
                    body.find("#hiddenEdit").val(JSON.stringify(data));
                    //form.render();
                    setTimeout(function () {
                        layui.layer.tips('点击此处返回角色列表',
                            '.layui-layer-setwin .layui-layer-close', {
                                tips: 3
                            });
                    }, 500)
                }
            })
            layui.layer.full(index);
            //改变窗口大小时，重置弹窗的宽高，防止超出可视区域（如F12调出debug的操作）
            $(window).on("resize", function () {
                layui.layer.full(index);
            })
        }


        function del(id) {
            $.get("/api/system/delRole", {
                id: id
            }, function (data) {
                if (data.code == 200) {
                    layer.msg("删除成功", {"icon": 1});
                    userTable.reload(); //刷新表格数据（也即让table重新加载url）
                    layer.close(index);//关闭弹出框
                } else {
                    layer.close(index);//关闭弹出框
                    layer.msg(data.msg, {
                        icon: 2
                    });
                }
            })
        }


    })
</script>


<!-- 行工具栏模板 -->
<script type="text/html" id="operationTpl">
    <a href="javascript:" title="编辑角色" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
    <a href="javascript:" title="删除角色" lay-event="del"><i class="layui-icon">&#xe640;</i></a>
</script>


</body>
</html>
